<template>
  <div class="container">
    <div class="sixInfo2Con f-c">
      <div class="boxItem">
        <div class="title1">
          <div class="title1-con">{{data.nameTwo}}：{{data.valueTwo}}</div>
          <div class="title1-con">{{data.nameThree}}：{{data.valueThree}}</div>
          <div class="title1-con">{{data.nameFour}}：{{data.valueFour}}</div>
        </div>
      </div>
      <div class="boxItem">
        <div class="title2">
          <div class="title2-con1">{{data.nameOne}}</div>
          <div class="title2-con2">{{data.valueOne}}</div>
        </div>
      </div>
      <div class="boxItem">
        <div class="title1">
          <div class="title1-con t_r">{{data.nameFive}}：{{data.valueFive}}</div>
          <div class="title1-con t_r">{{data.nameSix}}：{{data.valueSix}}</div>
          <div class="title1-con t_r">{{data.nameSeven}}：{{data.valueSeven}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: {},
        drawTiming: null
      }
    },
    components: {},
    props: {
      configCode: {
        type: String,
        default: ''
      },
      index: {
        type: Number,
        default: 0
      }
    },
    mounted() {
      this.drawTimingFn()
    },
    beforeDestroy() {
      clearInterval(this.drawTiming);
      this.drawTiming = null
    },
    methods: {
      drawTimingFn () {
        this.queryData();
        this.drawTiming = setInterval(() => {
          this.queryData();
        }, 12000);
      },
      queryData() {
        this.$http.get("/visShow/queryData", {
          params: {
            configCode: this.configCode,
            index: this.index
          }
        }).then(res => {
          const {data} = res
          console.log(data, '设备状态图小')
          if (data.status == 200) {
            this.data = data.object
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
    padding: 10px;

    .f-c {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .sixInfo2Con {
      width: 100%;
      height: 100%;
      background-image: url("../../assets/img/Frame 303@2x.png");
      background-size: cover;
      background-position: center center;
    }

    .boxItem {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 116px;
      height: 100%;

      .title1 {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 100%;
        height: 100%;
        padding: 20px 3px;

        .title1-con {
          height: 15px;
          font-size: 12px;
          font-family: Source Han Sans CN, Source Han Sans CN-Medium;
          font-weight: 500;
          text-align: left;
          line-height: 12px;
        }
        .t_r {
          text-align: right;
        }
      }
      .title2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;
        .title2-con1 {
          height: 18px;
          font-size: 16px;
          font-family: Source Han Sans CN, Source Han Sans CN-Medium;
          font-weight: 500;
          text-align: left;
          color: #ffffff;
          line-height: 14px;
          text-shadow: 0 0 4px #16d0ff;
          margin-bottom: 10px;
        }
        .title2-con2 {
          height: 12px;
          font-size: 12px;
          font-family: Source Han Sans CN, Source Han Sans CN-Medium;
          font-weight: 500;
          text-align: left;
          color: #ffffff;
          line-height: 9px;
        }
      }
    }
  }
</style>
